import { useMemo } from "react";
import { CounterNumberComponent } from "@/components/iteration";

import PropTypes from "prop-types";
const PixelCounter = (props) => {
  const value = useMemo(() => props.value && +props.value.replace("px", ""), [props.value]);

  const onChange = (value) => {
    props.onChange && props.onChange(`${value}px`);
  };

  return <CounterNumberComponent {...props} minValue={0} value={value} onChange={onChange} />;
};

PixelCounter.propTypes = {
  value: PropTypes.string,
  onChange: PropTypes.func,
};

export default PixelCounter;
